<template>
  <div class="main-layout">
    <div class="top">
      <a-header></a-header>
    </div>
    <div class="bottom">
      <div class="left">
        <a-side></a-side>
      </div>
      <div class="middle">
        <router-view/>
      </div>
      <div class="right">
        <chat></chat>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import {Component, Vue} from 'vue-property-decorator'
  import AHeader from '@/components/AHeader.vue'
  import ASide from '@/components/ASide.vue'
  import Chat from '@/views/chat/Chat.vue'
  import { mapActions } from 'vuex'

  @Component({
    components: {
      AHeader,
      ASide,
      Chat
    },
    created () {
      this.initWeb()
    },
    methods: {
      ...mapActions({
        initWeb: 'web/initWeb'
      })
    }
  })
  export default class MainLayout extends Vue {

  }
</script>

<style lang="scss" scoped>
  .main-layout{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    .top{
      background-color: #E3EAF3;
      box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
      height: 50px;
      width: 100%;
      position: absolute;
      top: 0;
      z-index: 9;
    }
    .bottom{
      top: 50px;
      right: 0;
      bottom: 0;
      left: 0;
      position: absolute;
      .left{
        background-color: #4c637b;
        width: 160px;
        top: 0;
        left: 0;
        bottom: 0;
        position: absolute;
        overflow: hidden;
      }
      .middle{
        top: 0;
        right: 225px;
        bottom: 0;
        left: 160px;
        position: absolute;
        padding: 15px;
      }
      .right{
        width: 225px;
        top: 0;
        bottom: 0;
        right: 0;
        position: absolute;
        border-left: 1px solid #ebeef5;
        background: #ffffff;
      }
    }
  }
</style>
